<style>
  .ft13{
    font-size:13px;
  }
  .tc {
    width:100%;
    text-align:center;
  }
</style>

<template>
<div class="contain">
  <div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>
  <header class="hd-top">
    <span class="iconfont icon-left" @click="goBack"></span>
    <h2 class="title">订单详情</h2>
  </header>
  <div class="page">
    <div class="list-warp">
      <div class="list-ctx" @click="goDetail(mainlist.BBillGuid)">
        <div class="head displayflex ft14">
          <p class="lft">{{bbilllist.BBillNo}}</p>
          <span class="flex1 txt-rit">{{mainlist.State | orderState}}</span>
        </div>
        <div class="grab-wrap">
          <div class="addr ft17"><span class="dotted"></span>{{mainlist.DepartureProvince | province}}{{mainlist.DepartureCity | city}}{{mainlist.DepartureDistrict | district}}{{mainlist.DepartureAddress}}</div>
          <div class="addr ft17"><span class="dotted org"></span>{{mainlist.ArrivalProvince | province}}{{mainlist.ArrivalCity | city}}{{mainlist.ArrivalDistrict | district}}{{mainlist.ArrivalAddress}}</div>
          <div class="statis ft14 displayflex">
            <span>{{mainlist.OrdersWeight | weight}}，{{mainlist.OrdersVolumn | volumn}}，共{{mainlist.OrdersPKGS}}件</span>
            <div class="flex1">，总费用<em class="org">￥</em><span class="price org ft16">{{mainlist.CarrierAmount + mainlist.InsuranceFee}}</span></div>
          </div>
        </div>
        <div class="icon-tag" v-if="mainlist.BBillType == 'B05'"><img src="~images/icon/emergent.png"></div>
      </div>
    </div>

    <div class="form-wrap mb30" style="border-bottom:0px;">
      <div class="displayflex form-item">
        <div class="label">已购保额</div>
        <div class="flex1 ctx">
          <div><i class="org">{{mainlist.InsuranceAmount | fixed00}}</i>元</div>
        </div>
      </div>
      <div class="displayflex form-item">
        <div class="label">理赔金额</div>
        <div class="flex1 ctx org">
          <div class="org ft13" v-if="Claim == null || Claim.ClaimAmount == 0">实际理赔金额以定损结果为准</div>
        </div>
      </div>
    </div>

    <!--<div class="form-wrap2 mb30">
      <p class="txt">物损照片</p>
       <uploader-imgs :word="'凭证'" v-model="picJson" :list="picJson"></uploader-imgs>
    </div>-->

  </div>

  <div class="form-box displayflex mb0">
    <div class="label">申请原因：</div>
    <div class="ctx flex1">
      <x-textarea title="" placeholder="字数200字以内" v-model="Memo" autosize :max="200"></x-textarea>
      <!-- <textarea placeholder="请输入" v-model="Memo"></textarea> -->
    </div>
  </div>

  <div class="btn-double displayflex">
    <div class="flex1" @click="submit()" v-if="claimState == 0">提交</div>
    <div class="tc" v-else-if="claimState == 1">没有保单信息</div>
    <div class="tc" v-else-if="claimState == 2">保单已申请理赔</div>
    <div class="tc" v-else-if="claimState == 3">保单号码没有绑定</div>
    <div class="tc" v-else-if="claimState == 4">保险公司没有指定</div>
    <div class="tc" v-else>同步中</div>
  </div>
</div>
</template>

<script>
import uploaderImgs from "@/components/share/uploaders.vue";
export default{
  components: {
    uploaderImgs
  },
   data() {
    return {
      bbilllist: [],
      mainlist:[],
      Insurance:[],
      Claim:[],
      bbillno: "",
      showLoad: true,
      picJson: {
        imgLista: [],
        imgListBase: []
      },
      Memo:'',
    };
  },
  created() {
    this.getData();
  },
  computed: {
    userinfo() {
      if (localStorage.UserInfo) {
        return JSON.parse(localStorage.UserInfo);
      }
    },
    claimState() {
      if(this.Insurance == null) {
        return 1; //没有保单信息
      } else {
        if(this.Insurance.State == '2')
        {
          return 2; //已申请理赔，不能重复申请
        }
        if(this.Insurance.InsuranceNo == '')
        {
          return 3; //保单号码不能为空
        }
        if(this.Insurance.InsuranceCompany == '')
        {
          return 4; //保险公司不能为空
        }
        if(this.Insurance.State == '1')
        {
          return 0; //正常可申请
        }
      }
    }
  },
  methods:{
    goBack(){
      this.$router.go(-1);
    },
    getData(){
      var guid = this.$route.query.id;
      var self = this;
      var query = {
        Guid: guid
      };
      this.Ajax.post("GetOrderDetailPlusInsurance", query).then(function(resp) {
        self.showLoad = false;
        if (resp.IsSuccess) {
          self.bbilllist = resp.Data.Bill;
          self.mainlist =resp.Data.Main;
          self.goodslist = resp.Data.BbDetial;
          self.HandOver =resp.Data.HandOver;
          self.Insurance = resp.Data.Insrecord;
          self.Claim = resp.Data.Claimrecord;
          // self.handoverPict = JSON.parse(self.HandOver.HandoverPict);
        }
      });
      // this.picJson.imgLista.push('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozODJlMjE3Yy1jZmIwLWMzNDktYjQ2OS02Yjg2YmY4OTk2N2YiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTAyNTYzQTE0MkYwMTFFOEIxMjlCRTVCMUU3MUIxQzEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTAyNTYzQTA0MkYwMTFFOEIxMjlCRTVCMUU3MUIxQzEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MzgyZTIxN2MtY2ZiMC1jMzQ5LWI0NjktNmI4NmJmODk5NjdmIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjM4MmUyMTdjLWNmYjAtYzM0OS1iNDY5LTZiODZiZjg5OTY3ZiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PobFmnMAAAAOSURBVHjaYvrPwAAQYAADCQEC3owWcQAAAABJRU5ErkJggg==')
      // this.picJson.imgLista.push('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozODJlMjE3Yy1jZmIwLWMzNDktYjQ2OS02Yjg2YmY4OTk2N2YiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTAyNTYzQTE0MkYwMTFFOEIxMjlCRTVCMUU3MUIxQzEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTAyNTYzQTA0MkYwMTFFOEIxMjlCRTVCMUU3MUIxQzEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MzgyZTIxN2MtY2ZiMC1jMzQ5LWI0NjktNmI4NmJmODk5NjdmIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjM4MmUyMTdjLWNmYjAtYzM0OS1iNDY5LTZiODZiZjg5OTY3ZiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PobFmnMAAAAOSURBVHjaYvrPwAAQYAADCQEC3owWcQAAAABJRU5ErkJggg==')
      // this.picJson.imgListBase.push('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozODJlMjE3Yy1jZmIwLWMzNDktYjQ2OS02Yjg2YmY4OTk2N2YiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTAyNTYzQTE0MkYwMTFFOEIxMjlCRTVCMUU3MUIxQzEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTAyNTYzQTA0MkYwMTFFOEIxMjlCRTVCMUU3MUIxQzEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MzgyZTIxN2MtY2ZiMC1jMzQ5LWI0NjktNmI4NmJmODk5NjdmIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjM4MmUyMTdjLWNmYjAtYzM0OS1iNDY5LTZiODZiZjg5OTY3ZiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PobFmnMAAAAOSURBVHjaYvrPwAAQYAADCQEC3owWcQAAAABJRU5ErkJggg==')
      // this.picJson.imgListBase.push('iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAA3ZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDozODJlMjE3Yy1jZmIwLWMzNDktYjQ2OS02Yjg2YmY4OTk2N2YiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RTAyNTYzQTE0MkYwMTFFOEIxMjlCRTVCMUU3MUIxQzEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RTAyNTYzQTA0MkYwMTFFOEIxMjlCRTVCMUU3MUIxQzEiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MzgyZTIxN2MtY2ZiMC1jMzQ5LWI0NjktNmI4NmJmODk5NjdmIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjM4MmUyMTdjLWNmYjAtYzM0OS1iNDY5LTZiODZiZjg5OTY3ZiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PobFmnMAAAAOSURBVHjaYvrPwAAQYAADCQEC3owWcQAAAABJRU5ErkJggg==')
    },
    submit(){//提交理赔申请
      var self = this;
      //保单信息不完整
      if(this.Insurance == null || this.Insurance.InsuranceNo == '' || this.Insurance.InsuranceCompany == '')
      {
        var txt = '保单号未录入，保险公司未录入，请补全信息后再申请';
        if(this.userinfo.UserBizType == 'Cargowner')
        {
          txt = '保险信息不完整，请联系运营方确认保险信息完整性'
        }
        this.$vux.toast.show({
          type: "cancel", //success, warn, cancel, text
          text: txt,
        });
        return false;
      }

      if(this.Memo == '')
      {
        this.$vux.toast.show({
          type: "cancel", //success, warn, cancel, text
          text: "必须填写申请原因",
        });
        return false;
      }

      // if(this.picJson.imgListBase.length == 0)
      // {
      //   this.$vux.toast.show({
      //     type: "cancel", //success, warn, cancel, text
      //     text: "必须上传物损照片证据",
      //   });
      //   return false;
      // }

      this.showLoad = true;
      var query = {
        BBillGuid: self.bbilllist.Guid,
        BBillNo: self.bbilllist.BBillNo,
        // imgUrla: self.picJson.imgListBase,
        Memo: self.Memo,
        LoginedStaffID: self.userinfo.StaffID,
        LoginedName: self.userinfo.Name || self.userinfo.LogonUser,
      };
      this.Ajax.post("submitClaim", query).then(function(resp) {
        self.showLoad = false;

        if (resp.IsSuccess) {

          if(self.userinfo.UserBizType == 'Cargowner')
          {
            self.$vux.toast.show({
              type: 'success', //success, warn, cancel, text
              text: '理赔申请已提交',
              onHide() {
                self.$router.push({
                  path: 'orderList'
                });
              },
            });
          }
          else if(self.userinfo.UserBizType == 'Operation')
          {
            self.$vux.toast.show({
              type: 'success', //success, warn, cancel, text
              text: '理赔申请已提交',
              onHide() {
                self.$router.push({
                  path: 'pallList',
                  query:{type:'5'}
                });
              },
            });
          }
        } else {
          self.$vux.toast.show({
            type: 'warn', //success, warn, cancel, text
            text: '提交申请失败，请刷新重试',
          });
        }
      });
    },
  }
}
</script>